<template>
    <div class="contion">
        <div class="home">
            <div class="home_1">
                <span><b>通知</b></span>
            </div>
            <div class="home_6">
                <van-tabbar v-model="active" active-color="#ee0a24" fixed="true" class="h2">
                    <van-tabbar-item icon="wap-home-o" @click="home"/>
                    <van-tabbar-item icon="like-o" @click="like"/>
                    <div class="home_6_1">
                        <van-tabbar-item icon="shopping-cart-o" @click="cart" style="color:#FFFFFF;margin-top:10px"/>
                    </div>
                    <van-tabbar-item icon="comment-o"/>
                    <van-tabbar-item icon="manager-o" @click="my"/>
                  </van-tabbar>                  
            </div>
        </div>
    </div>
</template>

<script setup>
import {ref,onMounted} from "vue"
import {ElMessage} from 'element-plus'
import axios from 'axios'
import {useRouter} from 'vue-router'

const router = useRouter()

const active = ref(3);

const like = () => {
    router.push('/like')
}
const cart = () => {
    router.push('/cart')
}
const home = () => {
    router.push('/home')
}
const my = () => {
    router.push('/my')
}

let user = ref({})

const datauser = () => {
    axios.get(`http://127.0.0.1:8000/home/user/?user=${localStorage.getItem('userid')}`).then(res=>{
        // console.log(res)
        user.value = res.data.data
    })
}

let shoes = ref([])

const datashoe = () => {
    axios.get("http://127.0.0.1:8000/home/a/").then(res=>{
        console.log(res)
        shoes.value = res.data.data
    })
}

const shoe = () =>{
    router.push('shoe')
}

onMounted(()=>{
    datauser()
    datashoe()
})

</script>

<style scoped>
.contion{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.home{
    width: 600px;
    height: 1150px;
    display: flex;
    flex-direction: column;
    background-color: aqua;
}

.image{
    float: right;
    border-radius: 50px;
    margin-right: 80px;
}

.home_1{
    padding-top: 20px;
    padding-bottom: 10px;
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 1000;
    background-color: #FFFFFF;
    border: #FFFFFF solid 0px;
    text-align: center;
    font-size:25px;
}

#app {
    position: relative;
    min-height: 100vh;
}

.van-tabbar {
    width: 80%; /* 设置标签栏宽度 */
    max-width: 600px; /* 最大宽度限制 */
    margin: 0 auto; /* 水平居中 */
    position: fixed; /* 固定定位，保持在底部 */
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100; /* 确保在其他元素之上 */
    background-color: #FFFFFF;
}

.home_6_1{
    width: 50px;
    border-radius: 50px;
    background-color: #E44F32;
}

</style>